<template>
  <div class="login-container">

    <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="0px"
      class="card-box login-form">
      <el-card class="el-card">
        <h3 class="title">后台登录</h3>
        <el-form-item prop="username">
          <span class="svg-container svg-container_login">
            <icon-svg icon-class="yonghuming" />
          </span>
          <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="username" />
        </el-form-item>
        <el-form-item prop="password">
          <span class="svg-container">
            <icon-svg icon-class="mima"></icon-svg>
          </span>
          <el-input name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
            placeholder="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
            登录
          </el-button>
        </el-form-item>
      <!-- <div class='tips'>
        <span style="margin-right:20px;">username: admin</span>
        </span> password: admin</span>
      </div> -->
      </el-card>
    </el-form>

  </div>
</template>

<script>
import { login } from '@/api/login'

export default {
  name: 'Login',
  data () {
    return {
      loginForm: {
        username: '1',
        password: '1'
      },
      loading: false
    }
  },
  methods: {
    handleLogin () {
      this.$refs.loginForm.validate(valid => {
        login(this.loginForm.username, this.loginForm.password).then(response => {
          this.$router.push({ path: '/' })
          this.loading = true
          this.$message.success({
            message: '登录成功'
          })
        })
      })
    }
  }
}
</script>
<style>
.login-container {
  margin: 15% 300px auto auto;
  width: 500px;
}
body {
  background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1520916363738&di=39b1eea707ff23547b6144283a0717d4&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F43a7d933c895d143075cebdc74f082025aaf0722.jpg)
}
</style>
